<template>
  <div>
    <van-nav-bar title="点餐" left-text="返回" left-arrow></van-nav-bar>
    <div class="user1" style="backgroundColor: rgb(51, 51, 51)">
      <van-swipe style="height: 20px" :autoplay="3000" vertical>
        <van-swipe-item style="font-size: 2px; color: rgb(209, 153, 94)">
          贵宾特权 免费开通[学子贵宾卡]立享第二杯半价
        </van-swipe-item>
        <van-swipe-item style="font-size: 2px; color: rgb(209, 153, 94)">
          贵宾特权 免费开通[学子贵宾卡]立享第二杯半价
        </van-swipe-item>
        <van-swipe-item style="font-size: 2px; color: rgb(209, 153, 94)">
          贵宾特权 免费开通[学子贵宾卡]立享第二杯半价
        </van-swipe-item>
      </van-swipe>
      <div
        style="
          color: #fff;
          font-size: 15px;
          font-weight: 500;
          padding-bottom: 10px;
        "
      >
        贵宾{{ username }},您的收货地址为{{ address }},请注意下单位置<van-icon
          name="location-o"
        />
      </div>
    </div>
    <!-- 头部 -->
    <div class="head">
      <van-swipe :autoplay="1500">
        <van-swipe-item>
          <van-image
            :src="require('../assets/img/banner/6.png')"
            style="width: 100%"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            :src="require('../assets/img/banner/1.png')"
            style="width: 100%"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            :src="require('../assets/img/banner/2.png')"
            style="width: 100%"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            :src="require('../assets/img/banner/3.png')"
            style="width: 100%"
          />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div style="margin-top: 0px" class="left">
      <van-row style="height: 440px">
        <van-col span="7">
          <div style="float: left; margin-top: 10px; margin-bottom: 50px">
            <!-- 侧边sidebar -->
            <van-sidebar v-model="activeKey">
              <van-sidebar-item title="全部" />
              <van-sidebar-item title="时令水果" />
              <van-sidebar-item title="灵感上新" />
              <van-sidebar-item title="清爽不腻" />
              <van-sidebar-item title="热饮推荐" />
              <van-sidebar-item title="要浓郁" />
              <van-sidebar-item title="要简单" />
              <van-sidebar-item title="要经典" />
              <van-sidebar-item title="要吃点" />
            </van-sidebar>
          </div>
        </van-col>

        <van-col
          offset="0"
          span="17"
          style="margin-top: 10px; height: 400px; overflow-y: scroll"
        >
          <van-row
            v-for="(item, index) in itemList"
            :key="index"
            type="flex"
            justify="center"
          >
            <div
              class="backItem"
              v-if="item.tag == tag || (tag == '' && item.tag != '')"
            >
              <van-col span="6">
                <van-image
                  height="75px"
                  width="100px"
                  :src="item.itemSrc"
                ></van-image>
              </van-col>
              <van-col offset="4" span="10">
                <van-row class="name">
                  {{ item.itemName }}
                </van-row>
                <van-row class="type">
                  {{ item.itemType }}
                </van-row>
                <van-row class="price"> ￥ {{ item.itemPrice }} </van-row>
                <van-row>
                  <van-stepper
                    v-model="item.itemCount"
                    theme="round"
                    button-size="15"
                    min="0"
                    disable-input
                    style="margin-top: 10px"
                  />
                </van-row>
              </van-col>
            </div>
          </van-row>
        </van-col>
      </van-row>
    </div>
    <!-- 按钮 -->
    <div class="buy">
      <van-row>
        <van-col offset="" span="12">
          <van-button
            color="rgb(244, 185, 64)"
            @click="intoCar()"
            class="button1"
            style="width: 150px"
          >
            <div style="display: inline" v-if="sumPrice > 0">
              ￥{{ sumPrice }}
            </div>
            ⽴即购买</van-button
          >
        </van-col>
        <van-col offset="8" span="3">
          <van-button
            style="
              width: 45px;
              margin-top: 20px;
              font-size: 25px;
              color: rgb(244, 185, 64);
            "
            @click="ShowPop()"
            round
          >
            <van-icon name="cart-o" @click="ShowPop()" />
          </van-button>
        </van-col>
      </van-row>
    </div>
    <!-- 遮罩层 -->
    <van-popup
      v-model="showPop"
      position="bottom"
      :style="{ height: '60%' }"
      round=""
    >
      <div class="itemInPop">
        <van-row
          v-for="(item, index) in itemList"
          :key="index"
          type="flex"
          justify="center"
        >
          <div class="itemInCart" v-if="item.itemCount > 0">
            <van-col offset="1" span="5">
              <van-image
                height="60px"
                width="60px"
                :src="item.itemSrc"
              ></van-image>
            </van-col>
            <van-col offset="4" span="11">
              <van-row class="name">
                {{ item.itemName }}
              </van-row>
              <van-row class="price"> ￥ {{ item.itemPrice }} 元 </van-row>
              <van-row>
                <van-stepper
                  v-model="item.itemCount"
                  theme="round"
                  button-size="15"
                  min="0"
                  disable-input
                  style="margin-top: 10px"
                />
              </van-row>
            </van-col>
          </div>
        </van-row>
      </div>

      <van-row>
        <van-col offset="2" span="20">
          <van-button
            color="linear-gradient(to bottom, rgb(37, 33, 32), rgb(0,0,0))"
            @click="intoCar"
            class="button1"
          >
            <div style="display: inline" v-if="sumPrice > 0">
              ￥{{ sumPrice }}
            </div>
            ⽴即购买</van-button
          >
        </van-col>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
import storage from "../mydata/storage.js";
export default {
  data() {
    return {
      activeKey: 0,
      showPop: false,
      tag: "",
      username: "",
      phone: "",
      address: "",
      itemList: [
        // 时令水果
        {
          tag: "时令水果",
          itemName: "轻芝莓莓",
          itemType: "清幽绿研系列",
          itemSrc: require("../assets/img/时令水果/1.jpg"),
          itemPrice: 17.1,
          itemCount: 0,
        },
        {
          tag: "时令水果",
          itemName: "轻芝莓莓桃",
          itemType: "优选当季新鲜水果",
          itemSrc: require("../assets/img/时令水果/2.jpg"),
          itemPrice: 17.1,
          itemCount: 0,
        },
        {
          tag: "时令水果",
          itemName: "酷黑莓桑（首创）",
          itemType: "优选当季新鲜水果",
          itemSrc: require("../assets/img/时令水果/3.jpg"),
          itemPrice: 17.1,
          itemCount: 0,
        },
        {
          tag: "时令水果",
          itemName: "多肉葡萄桑",
          itemType: "优选当季新鲜水果",
          itemSrc: require("../assets/img/时令水果/4.jpg"),
          itemPrice: 17.1,
          itemCount: 0,
        },
        {
          tag: "时令水果",
          itemName: "多肉红提桑",
          itemType: "优选当季新鲜水果",
          itemSrc: require("../assets/img/时令水果/5.jpg"),
          itemPrice: 17.1,
          itemCount: 0,
        },
        {
          tag: "时令水果",
          itemName: "喜柿多多",
          itemType: "优选当季新鲜水果",
          itemSrc: require("../assets/img/时令水果/6.jpg"),
          itemPrice: 17.1,
          itemCount: 0,
        },
        // 灵感上新
        {
          tag: "灵感上新",
          itemName: "生椰芋",
          itemType: "优选广西槟榔芋",
          itemSrc: require("../assets/img/灵感上新/1.jpg"),
          itemPrice: 16.2,
          itemCount: 0,
        },
        {
          tag: "灵感上新",
          itemName: "甄奶·雪酿含翠",
          itemType: "甄选品质牛乳",
          itemSrc: require("../assets/img/灵感上新/2.jpg"),
          itemPrice: 16.2,
          itemCount: 0,
        },
        {
          tag: "灵感上新",
          itemName: "甄果·大橘画梨",
          itemType: "优选广西槟榔芋",
          itemSrc: require("../assets/img/灵感上新/3.jpg"),
          itemPrice: 16.2,
          itemCount: 0,
        },
        //    清爽不腻
        {
          tag: "清爽不腻",
          itemName: "多肉葡萄冻",
          itemType: "多肉葡萄灵感延申",
          itemSrc: require("../assets/img/清爽不腻/1.jpg"),
          itemPrice: 15.0,
          itemCount: 0,
        },
        {
          tag: "清爽不腻",
          itemName: "轻芝多肉葡萄",
          itemType: "当季手剥巨峰葡萄",
          itemSrc: require("../assets/img/清爽不腻/2.jpg"),
          itemPrice: 16.0,
          itemCount: 0,
        },
        {
          tag: "清爽不腻",
          itemName: "多肉青提冻",
          itemType: "当季手剥青提",
          itemSrc: require("../assets/img/清爽不腻/3.jpg"),
          itemPrice: 15.0,
          itemCount: 0,
        },
        {
          tag: "清爽不腻",
          itemName: "轻芒芒甘露",
          itemType: "当季手剥青提",
          itemSrc: require("../assets/img/清爽不腻/4.jpg"),
          itemPrice: 15.0,
          itemCount: 0,
        },
        {
          tag: "清爽不腻",
          itemName: "多肉大橘（首创）",
          itemType: "当季手剥青提",
          itemSrc: require("../assets/img/清爽不腻/5.jpg"),
          itemPrice: 17.0,
          itemCount: 0,
        },
        {
          tag: "清爽不腻",
          itemName: "绫华·寒霜龙眼椰",
          itemType: "当季手剥青提",
          itemSrc: require("../assets/img/清爽不腻/6.jpg"),
          itemPrice: 21.1,
          itemCount: 0,
        },
        {
          tag: "清爽不腻",
          itemName: "绫人·水影龙眼椰",
          itemType: "当季手剥青提",
          itemSrc: require("../assets/img/清爽不腻/6.jpg"),
          itemPrice: 22.1,
          itemCount: 0,
        },
        // 热饮推荐
        {
          tag: "热饮推荐",
          itemName: "热轻波波牛乳",
          itemType: "烤黑糖波波鲜牛乳",
          itemSrc: require("../assets/img/热饮推荐/1.jpg"),
          itemPrice: 20.0,
          itemCount: 0,
        },
        {
          tag: "热饮推荐",
          itemName: "热轻波波牛乳茶",
          itemType: "烤黑糖波波鲜牛乳",

          itemSrc: require("../assets/img/热饮推荐/2.jpg"),
          itemPrice: 20.0,
          itemCount: 0,
        },
        {
          tag: "热饮推荐",
          itemName: "芋泥波波",
          itemType: "烤黑糖波波鲜牛乳",

          itemSrc: require("../assets/img/热饮推荐/4.jpg"),
          itemPrice: 19.1,
          itemCount: 0,
        },
        {
          tag: "热饮推荐",
          itemName: "热黑糖波波茶",
          itemType: "烤黑糖波波鲜牛乳",

          itemSrc: require("../assets/img/热饮推荐/5.jpg"),
          itemPrice: 19.1,
          itemCount: 0,
        },
        {
          tag: "热饮推荐",
          itemName: "热轻糯糯",
          itemType: "烤黑糖波波鲜牛乳",

          itemSrc: require("../assets/img/热饮推荐/6.jpg"),
          itemPrice: 19.1,
          itemCount: 0,
        },
        {
          tag: "热饮推荐",
          itemName: "热芋泥牛乳满贯",
          itemType: "烤黑糖波波鲜牛乳",

          itemSrc: require("../assets/img/热饮推荐/7.jpg"),
          itemPrice: 19.1,
          itemCount: 0,
        },
        {
          tag: "热饮推荐",
          itemName: "热芋泥牛乳茶",
          itemType: "烤黑糖波波鲜牛乳",
          itemSrc: require("../assets/img/热饮推荐/8.jpg"),
          itemPrice: 19.1,
          itemCount: 0,
        },
        {
          tag: "热饮推荐",
          itemName: "热芋泥牛乳茶",
          itemType: "烤黑糖波波鲜牛乳",
          itemSrc: require("../assets/img/热饮推荐/9.jpg"),
          itemPrice: 19.1,
          itemCount: 0,
        },
        {
          tag: "热饮推荐",
          itemName: "热芋泥牛乳茶",
          itemType: "烤黑糖波波鲜牛乳",
          itemSrc: require("../assets/img/热饮推荐/10.jpg"),
          itemPrice: 19.1,
          itemCount: 0,
        },
        {
          tag: "热饮推荐",
          itemName: "热芋泥牛乳茶",
          itemType: "烤黑糖波波鲜牛乳",
          itemSrc: require("../assets/img/热饮推荐/11.jpg"),
          itemPrice: 19.1,
          itemCount: 0,
        },
        {
          tag: "热饮推荐",
          itemName: "热芋泥牛乳茶",
          itemType: "烤黑糖波波鲜牛乳",
          itemSrc: require("../assets/img/热饮推荐/12.jpg"),
          itemPrice: 19.1,
          itemCount: 0,
        },
        // 要浓郁
        {
          tag: "要浓郁",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "豆乳花香拿铁",
          itemSrc: require("../assets/img/要浓郁/1.jpg"),
          itemPrice: 18.0,
          itemCount: 0,
        },
        {
          tag: "要浓郁",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "甄选豆乳抹茶",
          itemSrc: require("../assets/img/要浓郁/2.jpg"),
          itemPrice: 21.0,
          itemCount: 0,
        },
        {
          tag: "要浓郁",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "野兽派",
          itemSrc: require("../assets/img/要浓郁/3.jpg"),
          itemPrice: 18.0,
          itemCount: 0,
        },
        // 要简单
        {
          tag: "要简单",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "芝士多肉草莓",
          itemSrc: require("../assets/img/要简单/1.jpg"),
          itemPrice: 18.2,
          itemCount: 0,
        },
        {
          tag: "要简单",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "奥利奥抹茶",
          itemSrc: require("../assets/img/要简单/3.jpg"),
          itemPrice: 23.1,
          itemCount: 0,
        },
        {
          tag: "要简单",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "厚乳可可",
          itemSrc: require("../assets/img/要简单/4.jpg"),
          itemPrice: 20.2,
          itemCount: 0,
        },
        {
          tag: "要简单",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "厚乳可可",
          itemSrc: require("../assets/img/要简单/5.jpg"),
          itemPrice: 20.2,
          itemCount: 0,
        },
        {
          tag: "要简单",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "厚乳可可",
          itemSrc: require("../assets/img/要简单/6.jpg"),
          itemPrice: 20.2,
          itemCount: 0,
        },
        {
          tag: "要简单",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "厚乳可可",
          itemSrc: require("../assets/img/要简单/7.jpg"),
          itemPrice: 20.2,
          itemCount: 0,
        },
        //    要经典
        {
          tag: "要经典",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "水果多多酸奶",
          itemSrc: require("../assets/img/要经典/1.jpg"),
          itemPrice: 18.0,
          itemCount: 0,
        },
        {
          tag: "要经典",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "芒果多多酸奶",
          itemSrc: require("../assets/img/要经典/2.jpg"),
          itemPrice: 17.0,
          itemCount: 0,
        },
        {
          tag: "要经典",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "多肉芒芒酸酪酪",
          itemSrc: require("../assets/img/要经典/3.jpg"),
          itemPrice: 19.0,
          itemCount: 0,
        },
        {
          tag: "要经典",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "西米芒芒酸酪酪",
          itemSrc: require("../assets/img/要经典/4.jpg"),
          itemPrice: 19.0,
          itemCount: 0,
        },
        //    要吃点
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "水果多多酸奶",
          itemSrc: require("../assets/img/要吃点/1.jpg"),
          itemPrice: 18.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "芒果多多酸奶",
          itemSrc: require("../assets/img/要吃点/2.jpg"),
          itemPrice: 17.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "多肉芒芒酸酪酪",
          itemSrc: require("../assets/img/要吃点/3.jpg"),
          itemPrice: 19.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "西米芒芒酸酪酪",
          itemSrc: require("../assets/img/要吃点/4.jpg"),
          itemPrice: 19.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "水果多多酸奶",
          itemSrc: require("../assets/img/要吃点/5.jpg"),
          itemPrice: 18.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "芒果多多酸奶",
          itemSrc: require("../assets/img/要吃点/6.jpg"),
          itemPrice: 17.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "多肉芒芒酸酪酪",
          itemSrc: require("../assets/img/要吃点/7.jpg"),
          itemPrice: 19.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "西米芒芒酸酪酪",
          itemSrc: require("../assets/img/要吃点/8.jpg"),
          itemPrice: 19.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "水果多多酸奶",
          itemSrc: require("../assets/img/要吃点/9.jpg"),
          itemPrice: 18.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "芒果多多酸奶",
          itemSrc: require("../assets/img/要吃点/10.jpg"),
          itemPrice: 17.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "多肉芒芒酸酪酪",
          itemSrc: require("../assets/img/要吃点/11.jpg"),
          itemPrice: 19.0,
          itemCount: 0,
        },
        {
          tag: "要吃点",
          itemType: "烤黑糖波波鲜牛乳",
          itemName: "西米芒芒酸酪酪",
          itemSrc: require("../assets/img/要吃点/12.jpg"),
          itemPrice: 19.0,
          itemCount: 0,
        },
      ],
      addCar: [],
    };
  },
  beforeMount() {
    var data = storage.get("userinfo");
    this.username = data.username;
    this.phone = data.phone;
    this.address = data.address;
  },
  methods: {
    ShowPop: function () {
      this.showPop = true;
    },
    //侧边导航栏切换函数
    SortTag: function (active) {
      switch (active) {
        case 0:
          {
            this.tag = "";
          }
          break;
        case 1:
          {
            this.tag = "时令水果";
          }
          break;
        case 2:
          {
            this.tag = "灵感上新";
          }
          break;
        case 3:
          {
            this.tag = "清爽不腻";
          }
          break;
        case 4:
          {
            this.tag = "热饮推荐";
          }
          break;
        case 5:
          {
            this.tag = "要浓郁";
          }
          break;
        case 6:
          {
            this.tag = "要简单";
          }
          break;
        case 7:
          {
            this.tag = "要经典";
          }
          break;
        case 8:
          {
            this.tag = "要吃点";
          }
          break;

        default:
          break;
      }
    },
    intoCar: function () {
      for (var i = 0; i < this.itemList.length; i++) {
        if (this.itemList[i].itemCount > 0) {
          this.addCar.push({
            itemName: this.itemList[i].itemName,
            itemSrc: this.itemList[i].itemSrc,
            itemType: this.itemList[i].itemType,
            itemPrice: this.itemList[i].itemPrice,
            itemCount: this.itemList[i].itemCount,
          });
        }
      }

      if (this.addCar.length == 0) {
        return;
      }
      this.$emit("sendinfocar", this.addCar);
      this.$router.push("/car");
    },
  },

  computed: {
    sumPrice: function () {
      var sum = 0;
      for (var i = 0; i < this.itemList.length; i++) {
        if (this.itemList[i].itemCount != 0) {
          sum +=
            parseFloat(this.itemList[i].itemPrice) * this.itemList[i].itemCount;
        }
      }
      return sum;
    },
  },

  watch: {
    //监听侧边导航栏并使用切换函数
    activeKey(newActive, oldActive) {
      if (newActive != oldActive) {
        this.SortTag(newActive);
        // console.log(newActive);
      }
    },
  },
};
</script>

<style>
.button1 {
  width: 90%;
  border-radius: 25px;
  margin-top: 20px;
}
.van-swipe__indicator {
  background-color: transparent;
}
.name {
  text-align: left;
  font-size: 13px;
  font-weight: bold;
  color: rgb(51, 51, 51);
  margin-top: 5px;
}
.type {
  text-align: left;
  font-size: 3px;
}

.price {
  text-align: left;
  font-size: 13px;
  font-weight: bold;
  color: rgb(51, 51, 51);
  margin-top: 5px;
}

.buy {
  position: fixed;
  bottom: 50px;
  right: 20px;
}
.van-sidebar-item {
  padding: 12px, 6px;
}
.itemInPop {
  margin: 10px;
  border-radius: 10px;
  height: 80%;
  overflow-y: scroll;
}

.iconScart {
  position: absolute;
  top: 84%;
  right: 7%;
  z-index: 99;
  font-size: 30px;
  transform: rotateY(180deg);
  background-color: rgb(20, 153, 98);
  color: rgb(255, 255, 255);
  border-radius: 50%;
  padding: 5px;
}
.van-stepper {
  text-align: left;
}
.van-stepper--round .van-stepper__plus {
  background-color: rgb(0, 0, 0);
}
.van-stepper--round .van-stepper__minus {
  border: 1px solid rgb(0, 0, 0);
  background-color: rgb(0, 0, 0);
}
.van-image__img {
  border-radius: 5px;
}
.van-sidebar-item--select {
  color: rgb(0, 0, 0);
  font-weight: bold;
}
.btnAdd {
  background-color: rgb(20, 153, 98);
  border: none;
}
.van-tag--primary.van-tag--plain {
  color: rgb(20, 153, 98);
}
.van-icon-star:before {
  color: rgb(20, 153, 98);
}
.van-icon-like:before {
  color: rgb(20, 153, 98);
}
.van-icon-clock:before {
  color: rgb(20, 153, 98);
}
.van-sidebar-item--select::before {
  background-color: rgb(0, 0, 0);
}
.van-stepper--round .van-stepper__minus {
  color: rgb(20, 153, 98);
}
.hightPos {
  margin-top: 10px;
  padding: 5px;
  box-shadow: 1px 4px 15px #c7c7c7;
  width: 90%;
  border-radius: 10px;
}

.backItem {
  padding-top: 10px;
  border-radius: 5px;
  width: 95%;
  height: 90px;
  box-shadow: 1px 1px 10px #f7f8fa;
  margin-top: 10px;
}

.itemInCart {
  padding-top: 10px;
  border-radius: 5px;
  width: 95%;
  height: 70px;
  box-shadow: 1px 1px 10px #f7f8fa;
  margin-top: 10px;
}
.van-nav-bar__title {
  color: #fff;
}
.van-nav-bar {
  background-color: rgb(51, 51, 51);
}
.van-icon-arrow-left:before {
  color: #fff;
}
.van-nav-bar__text {
  color: #fff;
}
</style>
